<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";

import { searchDataQbxx } from "@/api/search";
import { addOrUpdateQbxx } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataQbxx({ m: "能力现状-组织信息通信保障的有利条件和不利因素" }).then(
    (res) => {
      const { data } = res;
      valueHtml.value =
        data.find((x) => x.k === "组织信息通信保障的有利条件和不利因素")?.v ||
        "";
    }
  );
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "1.有利条件：通信系统：本级人防指挥所实现网络通信XX个、占XX%，无线通信XX个、占XX%，有线通信XX个、占XX%，卫星通信XX个、占XX%，电信运营商通信覆盖所有城区，通信能力基本能够满足战时城市防空袭行动的需要。信息防护系统：本级人防指挥所信息防护手段较为完善的XX个、占XX%，人防专网采用全网物理隔离的方式组网运行，信息防护能力基本能够保证信息通信网络的安全。空情预警信息系统：本级人防指挥所接入XX个、占XX%，基本能够满足战时接收空情信息的需要。<br/>2.不利因素：电磁环境：电磁发射设备众多，信息安全保密难度较大大。预警报知建设方面，本级覆盖率未达到100%，存在一定的警报发送盲区。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateQbxx({
      m: "能力现状-组织信息通信保障的有利条件和不利因素",
      data: [
        {
          k: "组织信息通信保障的有利条件和不利因素",
          v: valueHtml.value,
        },
      ],
    })
      .then((result) => {
        if (result.code === 200) {
          ElMessage.success("操作成功");
          initHtml();
        } else {
          ElMessage.error(result.msg);
        }
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="组织信息通信保障的有利条件和不利因素" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>